<!-- 资源管理 -->
<template>
  <div class="thisPage experiment">
    <!-- 顶部导航 -->
    <!-- <div class="pageTitle">资源管理</div> -->
    <div class="topBanner">资源管理</div>
    <div class="heightP1" style="width: 100%; text-align: center">
      本平台提供动态优化的网络威胁分析科研的数据资源、模型资源及工具资源。
    </div>
    <main>
      <div class="evluationPage-left" style="width: 13%">
        <div
          v-for="it in pageLeft"
          :key="it.title"
          :class="it.class"
          :style="{ height: it.height || '12.5%' }"
        >
          <div class="leftItem">
            <div class="title">
              <img class="titleImg" :src="titleSrc" /><span class="titleText">{{
                it.title
              }}</span>
            </div>
            <div class="content">
              <div
                class="contentItem"
                v-for="i in it.list"
                :key="i"
                @click="toLeftPath(key, navItem)"
              >
                {{ i }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧主体 -->
      <section>
        <ul class="section section1">
          <li v-for="(item, key, index) in stateData" :key="index">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 44%;
              "
            >
              <img :src="item.img" :alt="item.title" />
              <div class="stateRight">
                <p class="stateTitle">{{ item.title }}</p>
                <p class="stateNum" :class="key">{{ item.num }}</p>
              </div>
            </div>
          </li>
        </ul>
        <div class="contain">
          <ul class="section section2" @click="openList(1)">
            <li v-for="(item, key, index) in dataResource" :key="index">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 70%;
                "
              >
                <img :src="item.img" :alt="item.title" class="APTLeftImg" />
                <div class="APTRight">
                  <p>
                    <span class="num">{{ item.num }}</span> 个
                  </p>
                  <p class="APTTitle">{{ item.title }}</p>
                </div>
              </div>
            </li>
          </ul>
          <ul class="section section2" @click="openList(2)">
            <li v-for="(item, key, index) in modeResource" :key="index">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 70%;
                "
              >
                <img :src="item.img" :alt="item.title" class="APTLeftImg" />
                <div class="APTRight">
                  <p>
                    <span class="num second">{{ item.num }}</span> 个
                  </p>
                  <p class="APTTitle">{{ item.title }}</p>
                </div>
              </div>
            </li>
          </ul>
          <ul class="section section2" @click="openList(3)">
            <li v-for="(item, key, index) in toolResource" :key="index">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 70%;
                "
              >
                <img :src="item.img" :alt="item.title" class="APTLeftImg" />
                <div class="APTRight">
                  <p>
                    <span class="num third">{{ item.num }}</span> 个
                  </p>
                  <p class="APTTitle">{{ item.title }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </main>
    <template>
      <!-- 数据资源 -->
      <div>
        <el-dialog
          title="威胁分析数据资源"
          :visible.sync="dataDialog1"
          :close-on-click-modal="false"
          center
          width="60%"
          append-to-body="true"
        >
          <el-form
            :inline="true"
            size="small"
            :model="docSendFormInline"
            class="demo-form-inline"
            style="color: #333333"
          >
            <el-form-item label="名称：" style="line-height: 35px">
              <el-input placeholder="请输入名称" v-model="queryName" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryList">查询</el-button>
              <el-button class="margin-left-10" @click="clearList"
                >清空</el-button
              >
              <el-button
                class="margin-left-10"
                type="primary"
                @click="openAddDialog"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
          <el-table border :data="falDataList">
            <el-table-column label="序号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="des" label="描述" align="center" />
            <el-table-column prop="num" label="数量/条" align="center" />
            <el-table-column prop="heavy" label="数量/KB" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="editList(scope.row, scope.$index, 1)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="text"
                  @click="delList(scope.row, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" style="margin: 0 auto">
            <el-button
              type="primary"
              style="width: 80px; height: 40px; margin-bottom: 20px"
              @click="closeDialog"
              >确 定
            </el-button>
            <el-button
              type="primary"
              @click="closeDialog"
              style="width: 80px; height: 40px; margin-bottom: 20px"
              >取 消</el-button
            >
          </div>
          <el-dialog
            width="40%"
            :title="addDialogTitle"
            @close="cancelAdd"
            :visible.sync="addDialog1"
            append-to-body
            :close-on-click-modal="false"
            center
          >
            <el-form label-width="100px" :model="form">
              <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="form.des"></el-input>
              </el-form-item>
              <el-form-item label="数量/条">
                <el-input v-model="form.num"></el-input>
              </el-form-item>
              <el-form-item label="数量/KB">
                <el-input v-model="form.heavy"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addConfirm">确 定 </el-button>
              <el-button type="primary" @click="cancelAdd">取 消</el-button>
            </div>
          </el-dialog>
        </el-dialog>
      </div>
      <!-- 模型资源 -->
      <div>
        <el-dialog
          title="威胁分析模型资源"
          :visible.sync="dataDialog2"
          :close-on-click-modal="false"
          center
          width="60%"
          append-to-body="true"
        >
          <el-form
            :inline="true"
            size="small"
            class="demo-form-inline"
            style="color: #333333"
          >
            <el-form-item label="名称：" style="line-height: 35px">
              <el-input placeholder="请输入名称" v-model="queryName" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryList">查询</el-button>
              <el-button class="margin-left-10" @click="clearList"
                >清空</el-button
              >
              <el-button class="margin-left-10" @click="openAddDialog"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
          <el-table border :data="falDataList1">
            <el-table-column label="序号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="des" label="描述" align="center" />
            <el-table-column prop="input" label="输入" align="center" />
            <el-table-column prop="output" label="输出" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="editList(scope.row, scope.$index, 2)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="text"
                  @click="delList(scope.row, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" style="margin: 0 auto">
            <el-button
              type="primary"
              style="width: 80px; height: 40px; margin-bottom: 20px"
              @click="closeDialog"
              >确 定
            </el-button>
            <el-button
              type="primary"
              @click="closeDialog"
              style="width: 80px; height: 40px; margin-bottom: 20px"
              >取 消</el-button
            >
          </div>
          <el-dialog
            width="40%"
            :title="addDialogTitle"
            @close="cancelAdd"
            :visible.sync="addDialog2"
            append-to-body
            :close-on-click-modal="false"
            center
          >
            <el-form label-width="100px" :model="form">
              <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="form.des"></el-input>
              </el-form-item>
              <el-form-item label="输入">
                <el-input v-model="form.input"></el-input>
              </el-form-item>
              <el-form-item label="输出">
                <el-input v-model="form.output"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addConfirm">确 定 </el-button>
              <el-button type="primary" @click="cancelAdd">取 消</el-button>
            </div>
          </el-dialog>
        </el-dialog>
      </div>
      <!-- 工具资源 -->
      <div>
        <el-dialog
          title="威胁分析工具资源"
          :visible.sync="dataDialog3"
          :close-on-click-modal="false"
          center
          width="60%"
          append-to-body="true"
        >
          <el-form
            :inline="true"
            size="small"
            class="demo-form-inline"
            style="color: #333333"
          >
            <el-form-item label="名称：" style="line-height: 35px">
              <el-input placeholder="请输入名称" v-model="queryName" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryList">查询</el-button>
              <el-button class="margin-left-10" @click="clearList"
                >清空</el-button
              >
              <el-button class="margin-left-10" @click="openAddDialog"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
          <el-table border :data="falDataList2">
            <el-table-column label="序号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="des" label="描述" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="editList(scope.row, scope.$index, 3)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="text"
                  @click="delList(scope.row, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" style="margin: 0 auto">
            <el-button
              type="primary"
              style="width: 80px; height: 40px; margin-bottom: 20px"
              @click="closeDialog"
              >确 定
            </el-button>
            <el-button
              type="primary"
              @click="closeDialog"
              style="width: 80px; height: 40px; margin-bottom: 20px"
              >取 消</el-button
            >
          </div>
          <el-dialog
            width="40%"
            :title="addDialogTitle"
            @close="cancelAdd"
            :visible.sync="addDialog3"
            append-to-body
            :close-on-click-modal="false"
            center
          >
            <el-form label-width="100px" :model="form">
              <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="form.des"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addConfirm">确 定 </el-button>
              <el-button type="primary" @click="cancelAdd">取 消</el-button>
            </div>
          </el-dialog>
        </el-dialog>
      </div>
    </template>
  </div>
</template>
</div>
</template>

<script>
import datePicker from "./component/datePicker";
import chartApi from "./utils/chartApi";
import Chart from "./component/Chart";

export default {
  components: { datePicker, Chart },
  data() {
    return {
      ratio: window.screen.width / window.screen.height,
      // 新增时间选择默认为1，按周
      upUrl: require("../../../images/experimentManage/up.png"),
      downUrl: require("../../../images/experimentManage/down.png"),
      upTranUrl: require("../../../images/experimentManage/up-triangle.png"),
      downTranUrl: require("../../../images/experimentManage/down-triangle.png"),
      titleSrc: "/static/B1/homePage/evaluation/arrow-left.png",
      isChecked: 0,
      currentType: -1,
      topNavData: {
        data: { name: "数据汇聚", path: "" }, // path待修改
        threat: { name: "威胁监测", path: "" },
        origin: { name: "态势感知", path: "" },
        perception: { name: "溯源取证", path: "" },
      },
      pageLeft: [
        {
          title: "互联网数据",
          list: [
            "开源数据",
            "社交网络信息",
            "流量数据",
            "日志数据",
            "文件数据",
          ],
          class: "left-top",
          height: "26%",
        },
        {
          title: "涉密网数据",
          list: ["日志数据", "业务数据"],
          class: "left-middle",
          height: "15%",
        },
        {
          title: "移动网数据",
          list: ["日志数据"],
          class: "left-middle",
        },
        {
          title: "车联网数据",
          list: ["日志数据"],
          class: "left-middle",
        },
        {
          title: "电磁空间数据",
          list: ["日志数据"],
          class: "left-middle",
        },
        {
          title: "卫星网数据",
          list: ["日志数据"],
          class: "left-bottom",
        },
      ],
      stateData: {
        // num拿出来
        total: {
          img: require("../../../images/experimentManage/total.png"),
          title: "数据资源",
          num: "5项",
        },
        doing: {
          img: require("../../../images/experimentManage/doing.png"),
          title: "模型资源",
          num: "5项",
        },
        tobeReviewed: {
          img: require("../../../images/experimentManage/tobeReviewed.png"),
          title: "工具资源",
          num: "3项",
        },
      },
      dataResource: {
        wxqb: {
          img: require("../../../images/experimentManage/total.png"),
          title: "威胁情报标注数据集",
          num: 26,
          percent: 8.5,
          state: "down",
        },
        eyll: {
          img: require("../../../images/experimentManage/total.png"),
          title: "恶意流量标注数据集",
          num: "1000万",
          percent: 8.5,
          state: "down",
        },
        eywj: {
          img: require("../../../images/experimentManage/total.png"),
          title: "恶意文件样本标签数据集",
          num: "千万级",
          percent: 8.5,
          state: "down",
        },
        apfwy: {
          img: require("../../../images/experimentManage/total.png"),
          title: "APT文件标签数据集",
          num: "十万",
          percent: 8.5,
          state: "down",
        },
        syyrz: {
          img: require("../../../images/experimentManage/total.png"),
          title: "实验用日志",
          num: "一千万",
          percent: 8.5,
          state: "down",
        },
      },
      modeResource: {
        wxqb: {
          img: require("../../../images/experimentManage/doing.png"),
          title: "威胁实体提取模型",
          num: 10,
          percent: 8.5,
          state: "down",
        },
        eyll: {
          img: require("../../../images/experimentManage/doing.png"),
          title: "加密流量识别模型",
          num: 3,
          percent: 8.5,
          state: "down",
        },
        eywj: {
          img: require("../../../images/experimentManage/doing.png"),
          title: "恶意代码同源分析模型",
          num: 10,
          percent: 8.5,
          state: "down",
        },
        apfwy: {
          img: require("../../../images/experimentManage/doing.png"),
          title: "隐蔽隧道检测模型",
          num: 10,
          percent: 8.5,
          state: "down",
        },
        syyrz: {
          img: require("../../../images/experimentManage/doing.png"),
          title: "安全可视化组件",
          num: 10,
          percent: 8.5,
          state: "down",
        },
      },
      toolResource: {
        wxqb: {
          img: require("../../../images/experimentManage/tobeReviewed.png"),
          title: "恶意代码逆向工具",
          num: 10,
          percent: 8.5,
          state: "down",
        },
        eyll: {
          img: require("../../../images/experimentManage/tobeReviewed.png"),
          title: "恶意代码沙箱",
          num: 2,
          percent: 8.5,
          state: "down",
        },
        eywj: {
          img: require("../../../images/experimentManage/tobeReviewed.png"),
          title: "网络流量分析工具",
          num: 2,
          percent: 8.5,
          state: "down",
        },
      },
      dataDialog1: false,
      dataDialog2: false,
      dataDialog3: false,
      queryName: "",
      form: {
        name: "",
        des: "",
        num: "",
        heavy: "",
        remarks: "",
        input: "",
        output: "",
      },
      dataList: [
        {
          name: "恶意流量标注数据集",
          des: "可用于恶意流量检测、分析、挖掘等模型构建等相关实验。",
          num: "1000万条",
          heavy: "1",
          remarks: "-",
        },
        {
          name: "APT文件标签数据集",
          des: "可用于APT恶意代码分析相关实验",
          num: "1万条",
          heavy: "2",
          remarks: "-",
        },
        {
          name: "恶意文件样本标签数据集",
          des: "可用于恶意代码分类、同源等相关实验",
          num: "500万条",
          heavy: "3",
          remarks: "-",
        },
        {
          name: "实验用日志",
          des: "可用于日志检测、分析等模型构建等相关实验",
          num: "100万条",
          heavy: "4",
          remarks: "-",
        },
      ],
      dataList1: [
        {
          name: "恶意代码同源分析模型",
          des: "可用于恶意代码特征工程等相关实验",
          input: "用户自主构建的，符合格式规范的恶意代码特征",
          output: "恶意代码家族分类准确性",
          remarks: "10个",
        },
        {
          name: "隐蔽隧道检测模型",
          des: "可用于隐蔽流量特征工程等相关实验",
          input: "用户自主构建的，符合格式规范的流量特征",
          output: "隐蔽隧道检测准确性",
          remarks: "10个",
        },
      ],
      dataList2: [
        {
          name: "恶意代码沙箱",
          des: "用于实验所需的恶意代码动态行为提取",
          remarks: "2大类，Windows和Linux",
        },
      ],
      currentId: -1,
      falDataList: [],
      falDataList1: [],
      falDataList2: [],
      addDialog1: false,
      addDialog2: false,
      addDialog3: false,
      APT: {
        // num percent state拿出来
        APTClue: {
          img: require("../../../images/experimentManage/APT1.png"),
          title: "APT线索",
          num: 345,
          percent: 8.5,
          state: "down",
        },
        APTOrigin: {
          img: require("../../../images/experimentManage/APT2.png"),
          title: "APT溯源",
          num: 775,
          percent: 16,
          state: "up",
        },
        threat: {
          img: require("../../../images/experimentManage/APT3.png"),
          title: "威胁",
          num: 474,
          percent: 32,
          state: "up",
        },
      },
      newAddData: {
        total: { num: 2, percent: 10, state: "up" },
        week: { num: 312, percent: 10, state: "down" },
      },
      timeIndex: null,
      // xData与yData是根据接口返回
      xData: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      yData: [23, 45, 63, 65, 25, 15, 74],
      pieData: [
        { value: 10, name: "规则" },
        { value: 20, name: "日志" },
        { value: 30, name: "样本" },
        { value: 38, name: "统计" },
        { value: 12, name: "流量" },
      ],
      barData: [12, 30, 50, 20, 60],
      tableData: [
        {
          name: "小明",
          expNum: 50,
          weekOnWeek: 10,
          state: "up",
        },
        {
          name: "小红",
          expNum: 42,
          weekOnWeek: 10,
          state: "up",
        },
        {
          name: "高圆圆",
          expNum: 38,
          weekOnWeek: 10,
          state: "down",
        },
        {
          name: "王强",
          expNum: 20,
          weekOnWeek: 10,
          state: "down",
        },
        {
          name: "张三",
          expNum: 8,
          weekOnWeek: 10,
          state: "up",
        },
      ],
    };
  },
  created() {
    this.falDataList = JSON.parse(JSON.stringify(this.dataList));
    this.falDataList1 = JSON.parse(JSON.stringify(this.dataList1));
    this.falDataList2 = JSON.parse(JSON.stringify(this.dataList2));
  },
  computed: {
    lineOption() {
      return chartApi.getLineChart(this.xData, this.yData, this.$echarts);
    },
    pieOption() {
      return chartApi.getPieChart(this.pieData);
    },
    barOption() {
      return chartApi.getBarChart(this.barData);
    },
  },
  watch: {
    // 监听选择的是本日/本周/本月
    timeIndex(val) {
      if (val === 0) {
        this.xData = [
          "0:00",
          "1:00",
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
          "24:00",
        ];
        this.yData = [
          12, 23, 34, 56, 7, 7, 8, 98, 9, 0, 9, 5, 5, 4, 3, 78, 90, 80, 78, 9,
          78, 98, 123, 10, 12,
        ];
      }
      // 默认是1：周
      if (val === 1) {
        this.xData = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        this.yData = [23, 45, 63, 65, 25, 15, 74];
      }
      if (val === 2) {
        this.xData = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ];
        this.yData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 34];
      }
    },
  },
  methods: {
    // 打开列表
    openList(type) {
      this.currentType = type;
      if (type == 1) {
        this.dataDialog1 = true;
      } else if (type == 2) {
        this.dataDialog2 = true;
      } else {
        this.dataDialog3 = true;
      }
    },
    // 查询按钮
    queryList() {
      if (this.currentType == 1) {
        let newArr = [];
        this.dataList.forEach((ele) => {
          if (ele.name.includes(this.queryName)) {
            newArr.push(ele);
          }
        });
        this.falDataList = newArr;
      } else if (this.currentType == 2) {
        let newArr = [];
        this.dataList1.forEach((ele) => {
          if (ele.name.includes(this.queryName)) {
            newArr.push(ele);
          }
        });
        this.falDataList1 = newArr;
      } else {
        let newArr = [];
        this.dataList2.forEach((ele) => {
          if (ele.name.includes(this.queryName)) {
            newArr.push(ele);
          }
        });
        this.falDataList2 = newArr;
      }
    },
    // 关闭外层弹窗
    closeDialog() {
      this.dataDialog1 = false;
      this.dataDialog2 = false;
      this.dataDialog3 = false;
      this.clearList();
    },
    // 清空按钮
    clearList() {
      this.queryName = "";
      if (this.currentType == 1) {
        this.falDataList = JSON.parse(JSON.stringify(this.dataList));
      } else if (this.currentType == 2) {
        this.falDataList1 = JSON.parse(JSON.stringify(this.dataList1));
      } else {
        this.falDataList2 = JSON.parse(JSON.stringify(this.dataList2));
      }
    },
    // 编辑按钮
    editList(item, id) {
      this.addDialogTitle = "编辑";
      this.form.name = item.name;
      this.form.des = item.des;
      this.form.remarks = item.remarks;
      this.currentId = id;
      if (this.currentType == 1) {
        this.form.num = item.num;
        this.form.heavy = item.heavy;
        this.addDialog1 = true;
      } else if (this.currentType == 2) {
        this.form.input = item.input;
        this.form.output = item.output;
        this.addDialog2 = true;
      } else {
        this.addDialog3 = true;
      }
    },
    // 删除按钮
    delList(item, id) {
      if (this.currentType == 1) {
        this.dataList.splice(id, 1);
        this.falDataList = JSON.parse(JSON.stringify(this.dataList));
      } else if (this.currentType == 2) {
        this.dataList1.splice(id, 1);
        this.falDataList1 = JSON.parse(JSON.stringify(this.dataList1));
      } else {
        this.dataList2.splice(id, 1);
        this.falDataList2 = JSON.parse(JSON.stringify(this.dataList2));
      }
    },
    // 打开新增弹窗
    openAddDialog() {
      if (this.currentType == 1) {
        this.addDialog1 = true;
      } else if (this.currentType == 2) {
        this.addDialog2 = true;
      } else {
        this.addDialog3 = true;
      }
      this.addDialogTitle = "新增";
      this.form.name = "";
      this.form.des = "";
      this.form.num = "";
      this.form.heavy = "";
      this.form.remarks = "";
      this.form.input = "";
      this.form.output = "";
    },
    // 新增按钮确认
    addConfirm() {
      if (this.currentType == 1) {
        if (this.addDialogTitle == "新增") {
          this.dataList.push({
            name: this.form.name,
            des: this.form.des,
            num: this.form.num,
            heavy: this.form.heavy,
            remarks: this.form.remarks,
          });
          this.falDataList = JSON.parse(JSON.stringify(this.dataList));
          this.cancelAdd();
        } else {
          this.dataList[this.currentId].name = this.form.name;
          this.dataList[this.currentId].des = this.form.des;
          this.dataList[this.currentId].num = this.form.num;
          this.dataList[this.currentId].heavy = this.form.heavy;
          this.dataList[this.currentId].remarks = this.form.remarks;
          this.falDataList = JSON.parse(JSON.stringify(this.dataList));
          this.cancelAdd();
        }
      } else if (this.currentType == 2) {
        if (this.addDialogTitle == "新增") {
          this.dataList1.push({
            name: this.form.name,
            des: this.form.des,
            input: this.form.input,
            output: this.form.output,
            remarks: this.form.remarks,
          });
          this.falDataList1 = JSON.parse(JSON.stringify(this.dataList1));
          this.cancelAdd();
        } else {
          this.dataList1[this.currentId].name = this.form.name;
          this.dataList1[this.currentId].des = this.form.des;
          this.dataList1[this.currentId].input = this.form.input;
          this.dataList1[this.currentId].output = this.form.output;
          this.dataList1[this.currentId].remarks = this.form.remarks;
          this.falDataList1 = JSON.parse(JSON.stringify(this.dataList1));
          this.cancelAdd();
        }
      } else {
        if (this.addDialogTitle == "新增") {
          this.dataList2.push({
            name: this.form.name,
            des: this.form.des,
            remarks: this.form.remarks,
          });
          this.falDataList2 = JSON.parse(JSON.stringify(this.dataList2));
          this.cancelAdd();
        } else {
          this.dataList2[this.currentId].name = this.form.name;
          this.dataList2[this.currentId].des = this.form.des;
          this.dataList2[this.currentId].remarks = this.form.remarks;
          this.falDataList2 = JSON.parse(JSON.stringify(this.dataList2));
          this.cancelAdd();
        }
      }
    },
    // 新增按钮取消
    cancelAdd() {
      this.addDialog1 = false;
      this.addDialog2 = false;
      this.addDialog3 = false;
    },
    // 顶部跳转
    toTopPath(index) {
      this.isChecked = index;
      // console.log(index, '顶部导航跳转')
    },
    // 侧边栏跳转
    toLeftPath(type, navItem) {
      // console.log(type, navItem, '左侧栏导航跳转')
    },
    // 从日周月切换子组件传过来的值，代表选择本日/本周/本月
    getTimeIndex(timeIndex) {
      this.timeIndex = timeIndex;
    },
  },
};
</script>

<style lang="less" scoped>
@import url(./style.less);
@import url(../../../style/style.less);
.contentItem.content:last-child {
  margin-bottom: 0 !important;
}
.contentItem .right-item {
  margin-bottom: 10px !important;
}
.el-dialog__wrapper {
  overflow: visible !important;
}
.heightP1 {
  font-size: 20px;
  padding: 20px;
  align-items: center;
  margin-left: 40px;
  margin-bottom: 20px;
}
.APTLeftImg {
  height: 66px;
}
.topBanner {
  width: 100%;
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  color: #06ffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10%;
}
</style>
